<template>
	<!-- 签单列表 -->
	<!-- <view class="wrap"> -->
	<view class="">
		<view>
			<u-navbar title="我的待办" @leftClick="goToHome" :placeholder="true" />
		</view>
		<view class="wrap_box">
			<view class="header">
				<view class="search">
					<u--input 
						placeholder="请输入航班号"
						v-model="form.inFlightNo"
						prefixIcon="search"
						border="none"
						confirmType="search"
						confirm="confirmText"
						@change="changeInput"
						clearable
						@clear="clearInput"
						>
					</u--input>
					<u-button @click="show = true" type="text"
						class="btn">{{ calendar ? calendar : "请选择日期" }}
						<image 
							src="@/static/images/icon/Calendar.png" 
							class="img"/>
					</u-button>
					<u-icon
						name="close-circle"
						color="#989898"
						size="24"
						top="9"
						:style="{ display: calendar ? 'block' : 'none', cursor: 'pointer' }"
						@click="clearCalendar"/>
				</view>
			</view>
			<view class="card" @click="goSignDetail">
				<bill-item v-for="item in billList" :form="item" :infoAirline="item.billInfo['info-airline']" />
			</view>
			<u-calendar v-model="calendar" :show="show" minDate="2023-01-01" monthNum="13"
				:showMark="true" :closeOnClickOverlay="true" @confirm="confirmDate" @close="close" />
		</view>
	</view>
</template>

<script>
	import {
		httpAction
	} from '@/api/manage'
	const dayjs = require("dayjs")
	
	export default {
		data() {
			return {
				show: false,
				billList: [],
				form: {
					signStatus: 1,
					inFlightNo: '',
					inDate: ''
				},
				calendar: ''
			}
		},
		onLoad: function() {
			this.getData()
		},
		methods: {
			getData() {
				// 获取待办事项
				httpAction('/system/receipt/list', this.form, 'get').then(res => {
					if (res.data && res.data.records) {
						res.data.records.forEach(item => {
							item.billInfo = JSON.parse(item.billInfo)
						})
						this.billList = res.data.records
					} else {
						// toast('服务数据请求失败，请刷新重试')
					}
				})
			},
			goToHome() {
				this.$tab.switchTab('/pages/homePage/index')
			},
			// 输入框监听
			changeInput() {
				this.getData()
			},
			clearInput() {
				this.form.inFlightNo = ''
				this.getData()
			},
			clearCalendar(){
				this.calendar = ''
				this.form.inDate = ''
				this.form.inFlightNo = ''
				this.getData()
			},
			confirmText(val) {
				this.form.inFlightNo = val
				this.getData()
			},
			// 时间筛选
			confirmDate(val) {
				if(val.length <= 0) {
					return
				}
				this.calendar = val[0]
				this.show = false
				this.form.inDate = dayjs(this.calendar).format('YYYYMMDD')
				console.log(this.form)
				this.getData()
			},
			close() {
				this.show = false
			},
			// 签单详情
			goSignDetail() {
				this.$tab.reLaunch('/pages/signBill/billDetail')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background-color: #fff;
		max-height: 20%;
		margin-bottom: 10px;

		::v-deep .u-tabs__wrapper__nav__item {
			width: 50%;
		}

		.search {
			display: flex;
			padding: 10px 0;
			width: 85%;
			margin: 0 auto 10px;
			justify-content: center;

			.img {
				margin-left: 10px;
				width: 20px;
				height: 20px
			}

			::v-deep .u-input {
				background-color: #f5f5f5;
				width: 40%;
				border-radius: 20px !important;
				padding: 2px 10px !important;
			}

			.btn {
				min-width: 140px;
				width: 40%;
			}
		}
	}
</style>